<template>
  <div>

    <!-- 头部导航 -->
   <Header @open-question-modal="showQuestionModal = true" /> 
  <!-- <div class="hed">
      <ul>
        <li class="logo">蓝旗</li>
        <li class="lic"><router-link to="/ai">AI答疑</router-link></li>
        <li class="lics">
          <input v-model="searchQuery" class="suosou" placeholder="请输入你要解决的问题" />
          <a href="#" @click.prevent="search">搜索</a>
        </li>
        <li class="toquesion" @click="openModal">提问</li>
        <li class="lic"><router-link to="/chat">私信</router-link></li>
        <li class="lic">
          <router-link to="/profile">
            个人中心
            <img class="head-img" src="https://via.placeholder.com/40" alt="头像" />
          </router-link>
        </li>
      </ul>
    </div>
 -->
    <!-- 主体内容（保持不变） -->
    <div class="body-anser">
      <ul class="bod-ul">
        <li :class="{ 'active': activeTab === 'follow' }" @click="switchTab('follow')">关注</li>
        <li :class="{ 'active': activeTab === 'recommend' }" @click="switchTab('recommend')">推荐</li>
        <li :class="{ 'active': activeTab === 'hot' }" @click="switchTab('hot')">热榜</li>
      </ul>
      <hr />
      <div class="div-huifu">
     <component :is="currentComponent" />
        


      </div>
    </div>

    <!-- 提问模态框 -->
    <!-- 提问模态框 -->
<div class="modal-bg" v-show="showQuestionModal">
  <span class="message" v-if="message">{{ message }}</span>

  <div class="modal">
    <textarea v-model="newQuestionTitle" class="Toaskinput" placeholder="请输入你提的问题" />
    <textarea v-model="newQuestionDesc" class="Toaskinput" placeholder="请输入问题描述" />
    <button class="toquesionask" @click="submitQuestion">提问</button>
    <button class="toquesionask" @click="closeModal">关闭</button>
  </div>
</div>

    <!-- 网站备案 -->
    <div class="footer">
      <a href="http://beian.miit.gov.cn/">湘ICP备2023014806号-1</a>
    </div>
  </div>
</template>
<script>
import http from '@/api/http';
import HotProblem from './HotProblem.vue';
import Answer from './Answer.vue';
import Header from './Header.vue';
export default {
   name: 'TabContainer',
   components: {
    HotProblem,
    Answer,
    Header
  },
  data() {
    return {
        activeTab: 'follow',
    searchQuery: '',
    newQuestionTitle: '',
    newQuestionDesc: '',
    message: '',
    showQuestionModal: false // ✅ 统一使用这个变量控制模态框
    // 删除 isModalVisible，它不存在！
  
    };
  },
   computed: {
   
    currentComponent() {
      if (this.activeTab === 'follow') {
      return 'Answer' // ✅ 正确：组件名匹配
    } else if (this.activeTab === 'recommend') {
      return 'Answer'
    } else if (this.activeTab === 'hot') {
      return 'HotProblem'
    }
    return null
    }
  },
  methods: {
    //文章搜索
    search() {

      console.log(this.searchQuery);


    },
    switchTab(Tab){
    this.activeTab=Tab;

    },
    //提问显示
    openModal() {
      this.showQuestionModal = true;
    },
    //提问页面关闭
    closeModal() {
      this.showQuestionModal = false;
      // 可选：关闭时清空输入框
      this.newQuestionTitle = '';
    },
    //提问
    submitQuestion() {
      const user = JSON.parse(localStorage.getItem('user'));
      if (!this.newQuestionTitle.trim() || !this.newQuestionDesc.trim()) {
        this.message = '请填写完整内容';

        // 2秒后自动消失
        setTimeout(() => {
          this.message = '';
        }, 2000);

        return;
      }

      // 验证通过，执行提交逻辑
      var data = http.post('/api/Essay/AddQuestions', {
        questionname: this.newQuestionTitle,
        questioner: user.name,
        questionerid: user.sid,
        questiondesc: this.newQuestionDesc
      }).then(response => {
        this.message = response.message

        setTimeout(() => {
          this.message = '';
        }, 2000);

        console.log("✅ 请求成功，response 是：", response.message); // 看这一行有没有输出
      })
        .catch(error => {
          this.message = error.message

          setTimeout(() => {
            this.message = '';
          }, 2000);

          console.log("❌ 请求失败，error 是：", error.message); // 看是不是走到了 catch
        });;




    }





  }
};


</script>



<style scoped>
.Toaskinput {

  border: none;
  /* 彻底移除边框 */
  outline: none;
}

.Toaskinput {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  /* 设置字体 */
  width: 80%;
}

/* ========== 头部导航优化 ========== */
.hed {
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  position: fixed;
  border: 1px solid darkgrey;
  background-color: white;
  box-shadow: darkgrey 0px 0px 5px 0px;
  z-index: 1000;


  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  border-radius: 5px;
  /* 四个角都圆角 */
}

.hed ul {
  display: flex;
  /* 使用 Flex 布局 */
  align-items: center;
  /* 垂直居中 */
  height: 100%;
  /* 占满父容器高度 */
  margin: 0;
  padding: 0 20px;
  /* 左右留白 */
  list-style-type: none;

  width: fit-content;
}

/* 移除 float，由 flex 控制布局 */
.hed li {
  margin-right: 30px;
}

.logo {
  font-size: 45px;
  color: #1579DC;
  margin-right: 50px;
  /* 与其他项间距稍大 */
}

.lic a {
  font-size: 20px;
  color: #707070;
  text-decoration: none;
}

/* 搜索框容器：输入框 + 搜索链接 */
.lics {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lics input.suosou {
  width: 320px;
  height: 35px;
  padding-left: 20px;
  border-radius: 35px;
  border: 1px solid #ccc;
  outline: none;
}

.lics a {
  color: #1579DC;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
}

/* 提问按钮 */
.toquesion {
  background-color: #1579DC;
  color: white;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  /* 移除了 margin-top，由 flex 居中 */
}

.toquesionask {
  margin-top: 15%;
  background-color: #1579DC;
  color: white;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* 移除了 margin-top，由 flex 居中 */
}

/* 个人中心头像 */
.head-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 8px;
  object-fit: cover;
}

/* ========== 主体内容（保持原样，仅微调 ========== */
.body-anser {
  margin-top: 140px;
  margin-left: 120px;
  width: 70%;
  background-color: white;
  box-shadow: darkgrey 0px 1px 2px 0px;
  min-height: 100vh;
  padding-bottom: 20px;
   border-radius: 12px; /* 可根据设计调整数值 */
}

.bod-ul {
  display: flex;
  gap: 20px;
  padding: 20px 0 10px 17px;
  list-style: none;
  margin: 0;

}

.bod-ul li {
  cursor: pointer;
  color: #707070;
  margin-left: 11%;
}

.bod-ul li.active {
  color: #1341EA;
  font-weight: bold;
}

.que-h {
  margin: 12px 0;
}

.que-h .follow-btn {
  margin-left: 10px;
  color: #1579DC;
  cursor: pointer;
  font-size: 14px;
}

.read-more {
  color: #1579DC;
  cursor: pointer;
  margin-left: 5px;
}

.agre-li {
  background-color: #EFF0F7;
  color: #1341EA;
  width: 64px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
}

.comment-container {
  margin: 10px 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 4px;
}

.comment-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.comment-name {
  font-weight: bold;
  color: #333;
}

.Cooment {
  margin: 5px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.Cooment[type="button"] {
  background-color: #1579DC;
  color: white;
  cursor: pointer;
}

/* ========== 模态框 ========== */
.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  min-width: 800px;
  height: 40%;
  display: flex;
  gap: 12px;
  /* 按钮之间的间距，可以按需调整 */
  justify-content: flex-end;
  /* 可选：靠右对齐按钮 */
}

.modal input {
  width: 80%;
  height: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ========== 页脚 ========== */
.footer {
  position: fixed;
  bottom: 20px;
  right:8%;
  text-align: center;
}

.footer a {
  color: #666;
  text-decoration: none;
  font-size: 12px;
}

.message {
  padding: 10px;
  background-color: blue;
  color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 10px;
}
</style>

